<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div>
    <form id="form">
        <input type="text" name="sendName" placeholder="寄件人姓名">
        <input type="text" name="receiveName" placeholder="收件人姓名">
        <input type="text" name="status" placeholder="状态">
    </form>
    <span><button id="selectAnyBtn">多条件查询</button></span>
    <span><button id="backBtn">返回</button></span>
    <span><button id="addBtn">添加</button></span>
    <table id="pageTable" class="table table-bordered">
        <tr>
            <th>序号</th>
            <th>快递编号</th>
            <th>寄件人姓名</th>
            <th>收件人姓名</th>
            <th>取件码</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr>
        </tr>
    </table>
    <div class="container text-center">
        <input type="button" value="批量删除" class="btn btn-primary">
        <input type="button" value="首页" class="btn btn-primary">
        <input type="button" value="上一页" class="btn btn-primary">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <input type="button" value="下一页" class="btn btn-primary">
        <input type="button" value="尾页" class="btn btn-primary">
    </div>
    <nav style="text-align: right">
        <ul class="pagination" style="margin: 0 auto;">
        </ul>
    </nav>
    <!--订单详情 模态框-->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" title="">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="gridSystemModalLabel">订单详情</h4>
                </div>
                <div class="modal-body">
                    <div class="el-dialog__body">
                        <div class="info-box">
                            <div class="bar" style="text-align: center">
                                <p id="pageNum"></p>
                                <p id="status"></p>
                            </div>
                            <table cellpadding="0" cellspacing="1" class="table table-bordered">
                                <tr>
                                    <td>寄件</td>
                                    <td><h3 id="sNameAndPhone"></h3>
                                        <p id="sAddressAndDetailAddress">

                                    </td>
                                </tr>
                                <tr>
                                    <td>收件</td>
                                    <td><h3 id="rNameAndPhone"></h3>
                                        <p id="rAddressAndDetailAddress"></p></td>
                                </tr>
                                <tr>
                                    <td>其他</td>
                                    <td><p><em id="createTime"></em></p>
                                        <p><em id="finishTime"></em></p>
                                    </td>
                                    <td><p><em id="Weight"></em></p>
                                        <p><em id="Remark"></em></p>
                                    </td>

                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="deleteOrder" data-target="#myModal2"
                            data-toggle="modal" style="display: none">删除订单
                    </button>
                    <button type="button" class="btn btn-primary" id="updateOrder" style="display:none">修改订单</button>
                </div>
            </div>
        </div>
    </div>

    <!--删除/取消订单 模态框 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal2" title="">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" id="close" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h2 class="modal-title">提示</h2>
                </div>
                <div class="modal-body">
                    <img src="../../user/img/exclamationMark.svg" alt="" style="float: left"><h4 id="text">您确定要删除订单吗</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
                    <button type="button" class="btn btn-primary" id="ensure">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../../configure.js"></script>
<script>
    /**
     * 王晶晶
     */

    //点击返回,回到查询全部
    $("#backBtn").click(function () {
        location.href="PageList.html"
    })
    //多条件复合查询
    $("#selectAnyBtn").click(function () {

        var formData=$("#form").serialize()
        console.log(formData)
        $.post(url +"/admin/selectByAny",formData,function (data) {
            let html = ''
            if(data.code==1){
                alert("查询成功")
                $(".list").remove()
                for (let i = 0; i < data.data.length; i++) {

                    html += `<tr class="list"><td>${i + 1}</td>
                <td>${data.data[i].pageNum}</td>
                <td>${data.data[i].sendName}</td>
                <td>${data.data[i].receiveName}</td>
                <td>${data.data[i].pageCode}</td>
                <td class="status" id=${data.data[i].status}>${data.data[i].status}</td>
                <td><input type="button" class="orderDetail" id=${data.data[i].pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`


                }
                $("#pageTable").append(html)


            }else if(data.code==0){
                alert("查询失败")
            }
        },"json")
    })



    //订单详情

    $("body").on("click",".orderDetail",function () {
        var pageNum=$(this).attr("id")
        console.log(pageNum)
        $.post(url+"/admin/pageSelectByMulti", "searchInput=" + pageNum, function (data) {
            console.log(data)
            $("#pageNum").text("快递编号: " + data.data[0].pageNum)
            console.log(data.data[0].status)
            $("#status").text("最新状态: " + data.data[0].status)
            $("#sNameAndPhone").text(data.data[0].sendName + " " + data.data[0].sendPhone)
            $("#sAddressAndDetailAddress").text(data.data[0].sendProvince + data.data[0].sendCity + data.data[0].sendArea + " " + data.data[0].sendDetail)
            $("#rNameAndPhone").text(data.data[0].receiveName+ " " + data.data[0].receivePhone)
            $("#rAddressAndDetailAddress").text(data.data[0].receiveProvince + data.data[0].receiveCity + data.data[0].receiveArea + " " + data.data[0].receiveDetail)
            $("#createTime").text("创建时间: "+data.data[0].createTime)
            $("#finishTime").text("完成时间: "+data.data[0].updateTime)
            $("#Weight").text("重量:  "+data.data[0].weight+"kg")
            $("#Remark").text("备注:  "+data.data[0].remark)
            //根据status 变换模态框的第一个按钮的显示，以及点击后的显示
            //已下单状态可以修改用户信息，点击跳转修改页面
            var pageNum=data.data[0].pageNum
            var status=$('#myModal1').attr("title")
            console.log(status)
            $("").click(function () {

            })

            if ("已下单" == data.data[0].status) {
                $("#deleteOrder").attr("style","display:none")
                $("#updateOrder").attr("style","")

            } else if ("已删除" == data.data[0].status) {
                $("#updateOrder").attr("style","display:none")
                $("#deleteOrder").attr("style","")
                deleteOrder(pageNum)
            }else {
                $("#updateOrder").attr("style","display:none")
                $("#deleteOrder").attr("style","display:none")
            }
            $("#updateOrder").click(function () {
                console.log("修改")
                location.href="UpdatePageForm.html?pageNum="+pageNum
            })

        }, "json")
    })
    //



    //点击删除订单记录后并且点击确定
    function deleteOrder(pageNum){
        $("body").on("click","#ensure",function () {
            $("#myModal2").modal("hide")
            $("#myModal1").modal("hide")
            $.post(url+"/admin/pageDelete", "pageNum=" + pageNum, function (data) {
                if(data.code==1){
                    $(".list").remove()
                    alert("删除成功")
                    selectAll()
                }else if(data.code==0){
                    alert("删除失败")
                }

            })
        })
    }





    //查看所有订单
    function selectAll(){
        $.post(url+"/admin/pageSelectAll",function (data) {
            let html = ''


            if (data.code == 0) {
                // console.log("不存在")
                return
            } else if(data.code == 1){
                for (let i = 0; i < data.data.length; i++) {
                    html += `<tr class="list"><td>${i + 1}</td>
                <td>${data.data[i].pageNum}</td>
                <td>${data.data[i].sendName}</td>
                <td>${data.data[i].receiveName}</td>
                <td>${data.data[i].pageCode}</td>
                <td class="status" id=${data.data[i].status}>${data.data[i].status}</td>
                <td><input type="button" class="orderDetail" id=${data.data[i].pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`

                }
                $("#pageTable").append(html)
            }


        },"json")

    }
    //按条件查询订单
    function selectByMulti(){
        $.post(url+"/admin/pageSelectByMulti","searchInput="+$("#searchInput").val(),function (data) {
            let html = ''
            // console.log(data)
            if (data.code == 0) {
                console.log("不存在")
                return
            } else if(data.code == 1){

                for (let i = 0; i < data.data.length; i++) {

                    html += `<tr class="list"><td>${i + 1}</td>
                <td>${data.data[i].pageNum}</td>
                <td>${data.data[i].sendName}</td>
                <td>${data.data[i].receiveName}</td>
                <td>${data.data[i].pageCode}</td>
                <td class="status" id=${data.data[i].status}>${data.data[i].status}</td>

                <td><input type="button" class="sendDetail" id=${data.data[i].pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
                }
                $("#pageTable").append(html)
            }


        },"json")
    }
    $("#selectBtn").click(function () {
        $(".list").remove()
        selectByMulti()
    })
    //点击添加按钮,添加快递
    $("#addBtn").click(function () {
        location.href="AddPageForm.html"
    })
    selectAll()
</script>
</body>
</html>